<template>
  <div class="circles-view">
    <div class="circles-top">
      <img src="../assets/images/circle/head.png" @click="goToMine">
      <div class="circles-nav">
        <div class="circles-nav-list">
          <div :class="{active: tabId === 0}" @click="toggleTab(0)">关注</div>
          <div :class="{active: tabId === 1}" @click="toggleTab(1)">推荐</div>
          <div v-for="tab in tabList" :key="tab.id"><a :href="tab.h5_url">{{ tab.name }}</a></div>
        </div>
      </div>
      <img class="note-img" src="../assets/images/circle/note.png">
    </div>

    <!-- 关注 -->
    <div v-show="tabId === 0" class="attention">
      <!-- 未登录 -->
      <div class="attention-unlogin">
        <img src="../assets/images/circle/unlogin.png">
        <div class="tip-unlogin">登录看关注人最新动态</div>
        <button class="login-btn">立即登录</button>
      </div>

    </div>
    <!-- 发布 -->
    <div class="put-btn" v-show="tabId === 0">
      <img src="../assets/images/circle/add.png" alt="put-btn">
    </div>

    <!-- 推荐 -->
    <div v-show="tabId === 1" class="recommed-list">
    
      <div class="re-item" v-for="(re, i) in recommedList" :key="i">
        <!-- question -->
        <div class="question-item" v-show="re.content?.question">
          <div class="question-title">
            <img src="../assets/images/circle/question.png">
            {{ re.content?.question?.question }}
          </div>
          <div class="phone-model">
            <img :src="re.content?.question?re.content.tag_list[0].img:''"><span>{{ re.content?.question?re.content.tag_list[0].tag:'' }}</span>
          </div>
          <div class="answer" v-for="(a, i) in re.content?.question?.answer_list_v2" :key="i">
            <img :src="a.icon">
            <span>{{ a.answer }}</span>
          </div>
        </div>

        <!-- no question -->
        <div class="article-item" v-show="!re.content?.question">
          <div class="article-user">
            <img :src="re.content?.icon?re.content?.icon:''">
            <span>{{ re.content?.nickname?re.content?.nickname:'' }}</span>
          </div>

          <div class="article-title" v-show="re.content?.title">{{ re.content?.title }}</div>
          <div class="article-details">{{ re.content?.content?re.content?.content:'' }}</div>
          
          <!-- 图片 -->
          <div class="article-img">
            <div v-for="(pic, index) in re.content?.pic_list?re.content?.pic_list:''" :key="index"><img :src="pic.img"></div>
          </div>

          <div class="article-label">
            <a class="article-label-item" v-for="(tag, index) in re.content?.tag_list?re.content?.tag_list:''" :key="index"><img :src="tag.img" v-show="tag.img">{{ tag.tag }}</a>
          </div>
          <div class="article-review">
            <div><span>{{ re.content?.hot_comment?.name }}:</span>{{ re.content?.hot_comment?.comment }}</div>
          </div>
        </div>
        
        <!-- 操作帖子 -->
        <div class="re-item-bot">
          <div><img src="../assets/images/circle/share.png"></div>
          <div><img src="../assets/images/circle/message.png">{{ re.content?.comment_num }}</div>
          <div><img src="../assets/images/circle/zan.png">{{ re.content?.praise_num }}</div>
        </div>

        <!-- other -->
        <div class="other-img">
          <img src="../assets/images/circle/other.png" @click="showReport = true">
        </div>

      </div>

      <!-- 弹窗 -->
      <van-popup v-model="showReport" round position="bottom" :style="{ height: '25%' }">
        <div class="popup-con">
          <div class="popup-report">举报 &gt; </div>
          <div class="popup-span">辱骂攻击、广告、违法违规</div>
          <div class="popup-btn" @click="showReport = false">取消</div>
        </div>
      </van-popup>
    </div>

    <div v-if="showSueeset" class="more">正在加载更多</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabList: [],
      recommedList: [],
      newRecList: [],
      tabId: 1,
      showReport: false,
      afterNum: 20,
      showSueeset: false
    }
  },
  methods: {
    async getCirclesTab() {
      let {data} = await this.$http('https://apis.netstart.cn/xmsc/communicate/home_conf')
      this.tabList = data.data.tab_list
    },

    async getRecList() {
      let {data} = await this.$http('https://apis.netstart.cn/xmsc/communicate/home_rec?size=10&after=20')
      this.recommedList = data.data.rec_list
    },

    getNewRecList( afterNum = this.afterNum ){
      this.$http(`https://apis.netstart.cn/xmsc/communicate/home_rec?size=10&after=${afterNum}`).then(({data}) => {
        this.newRecList = data.data.rec_list
        this.showSueeset = false
      })
      
      for(let i = 0; i < this.newRecList.length; i++){
        this.recommedList.push(this.newRecList[i])
      }

      this.newRecList = []
    },

    toggleTab(n){
      this.tabId = n
    },

    // 滚动事件
    handleScroll() {
      // 获取页面页面的滚动高度
      let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight  
      // 获取页面滚动距离顶部的高度,  window.pageYOffse 兼容苹果
      let scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop  
      // 获取页面的可视高度
      let clientHeight = document.documentElement.clientHeight || document.body.clientHeight

      // 当距离最大高度还有20时
      if (scrollTop + clientHeight >= scrollHeight - 4) {
        this.afterNum = this.afterNum + 2

        if(this.afterNum % 10 === 0){
          // console.log(this.afterNum);
          this.getNewRecList(this.afterNum)
          
          this.showSueeset = true
        }
        
      }
    },
    goToMine(){
      this.$router.push({
        name: 'mine',
      })
    }
  },

  mounted(){
    this.getCirclesTab()
    this.getRecList()
    window.addEventListener("scroll", this.handleScroll)
  },

  destroyed () {
    // 页面卸载时移除监听事件
    window.removeEventListener('scroll', this.handleScroll)
  }
}
</script>

<style lang="scss" scoped>
.circles-view{
  padding-top: 12vw;

  .circles-top{
    width: 100vw;
    height: 12vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    padding: 0 2vw 0 3vw;
    box-sizing: border-box;
    background-color: #ffffff;
    z-index: 999;

    img{
      width: auto;
      height: 8vw;
    }

    .circles-nav{
      width: 76vw;
      height: 8vw;
      line-height: 8vw;
      overflow: hidden;

      .circles-nav-list{
        width: 76vw;
        height: 15vw;
        display: flex;
        justify-content: space-between;
        overflow-x: auto;

        div{
          color: #999999;
          font-weight: bold;
          font-size: 18px;
          margin: 0 16px;
          white-space: nowrap;

          &.active{
            color: #333;
            position: relative;

            &::before{
              display: block;
              content: "";
              position: absolute;
              top: 7vw;
              left: 50%;
              transform: translateX(-1vw);
              width: 2vw;
              height: 2px;
              background-color: #333;
            }
          }

          a{
            color: #999999;
          }
        }
      }
    }

    .note-img{
      width: auto;
      height: 10vw;
    }
  }

  .put-btn{
    width: 25vw;
    height: 25vw;
    position: fixed;
    right: 0;
    bottom: 15vw;

    img{
      width: 100%;
      height: 100%;
    }
  }

  .attention{

    .attention-unlogin{
      height: 86vh;
      color: #333;
      font-size: 18px;
      text-align: center;
      padding-top: 30vw;
      box-sizing: border-box;
      
      img{
        width: 50vw;
        height: auto;
      }

      .tip-unlogin{
        margin: 4vw 0 5vw 0;
      }

      .login-btn{
        color: #ffffff;
        font-size: 16px;
        width: 36vw;
        height: 12vw;
        background-color: #ff5528;
        border: #ff5528 1px solid;
        border-radius: 8vw;
      }
    }
  }

  .recommed-list{
    width: 100vw;
    padding-bottom: 15vw;
    position: relative;

    .other-img{
      position: absolute;
      top: 4vw;
      right: 3vw;
      width: 6vw;
      height: 6vw;
      img{
        width: 6vw;
      }
    }
    
    .popup-con{
      font-size: 18px;
      line-height: 7vw;
      text-align: center;

      .popup-report{
        margin-top: 5vw;
      }

      .popup-span{
        color: #757587;
        font-size: 12px;
        margin-bottom: 7vw;
      }

      .popup-btn{
        width: 85%;
        height: 12vw;
        line-height: 12vw;
        margin: 0 auto;
        background-color: #f1f1f1;
        border-radius: 12vw;
      }


    }

    .re-item{
      width: 100vw;
      padding-top: 4vw;

      .question-item{
        padding: 0 4vw;
        
        .question-title{
          width: 80vw;
          line-height: 6vw;
          img{
            width: 5vw;
            height: 5vw;
            vertical-align: middle;
          }

        }
        
        .phone-model{
          margin: 2vw 0 5vw 0;
          color: #757587;

          img{
            width: 5vw;
            height: 5vw;
            margin-right: 2vw;
          }
        }      
        
        .answer{
          display: flex;
          align-items: center;
          margin-bottom: 2vw;
          
          img{
            width: 5vw;
            height: 5vw;
            border-radius: 50%;
            margin-right: 2vw;
          }

          span{
            display: block;
            width: 88vw;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
        }
      }

      .article-item{
        padding: 0 4vw;

        .article-user{
          font-size: 14px;
          display: flex;
          align-items: center;

          img{
            width: 8vw;
            height: 8vw;
            border-radius: 50%;
            margin-right: 2vw;
          }
        }
      
        .article-title{
          width: 88vw;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          margin: 2vw 0;
        }
        
        .article-details{
          color: #757587;
          font-size: 14px;
          width: 90vw;
          line-height: 6vw;
          word-break: break-all;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          margin: 2vw 0;
        }
        
        .article-img{
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          margin-top: 4vw;
          
          div{
            min-width: 30%;
            flex: 1;

            img{
              width: 100%;
              height: 100%;
            }
          }
        }
        
        .article-label{
          color: #757587;
          font-size: 12px;
          margin: 4vw 0;
          
          .article-label-item{
            display: inline-block;
            padding: 2px 2vw;
            border-radius: 2vw;
            background-color: #f6f6f6;
            margin-right: 2vw;

            img{
              width: 4vw;
              height: 4vw;
              vertical-align: middle;
              margin-right: 1vw;
            }
          }
        }
        
        .article-review{
          width: 90vw;
          padding: 2vw 3vw;
          box-sizing: border-box;
          border-radius: 3vw;
          background-color: #f1f1f1;

          div{
            width: 85vw;
            line-height: 6vw;
            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;

            span{
              color: #757587;
              margin-right: 2vw;
            }
          }
        }
      }

      .re-item-bot{
        width: 100%;
        height: 12vw;
        color: #757587;
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        background-color: #ffffff;
        margin-top: 2vw;
        border-bottom: #f1f1f1 4px solid;

        div{
          display: flex;
          width: 33%;
          justify-content: center;
          align-items: center;
          img{
            width: 6vw;
            margin-bottom: 1vw;
          }
        }
      }

    }
  }

  .more{
    color: #ffffff;
    width: 40vw;
    height: 11vw;
    line-height: 11vw;
    text-align: center;
    position: fixed;
    left: 50%;
    top: 50%;
    background-color: rgba(0,0,0,0.7);
    border-radius: 10vw;
    transform: translate3d(-20vw,-10vw,0);
  }
}
</style>